<template>
    <div class="main-header">
        <div class="navbar">
            <div class="title">Dashboard</div>
            <div class="user-info">
                <el-avatar icon="el-icon-user" />
                <span class="username">Admin</span>
            </div>
        </div>
        <div class="tags-view">
            <el-tabs @tab-remove="removeTab" @tab-click="handleTabClick" @contextmenu.prevent="showContextMenu"
                v-model="activePath" type="card" class="demo-tabs">
                <el-tab-pane closable v-for="item in activeRoutesStore.activeRoutes" :key="item.fullPath"
                    :label="item.title" :name="item.fullPath" />
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useActiveRouterStore } from '@/stores/router.js'
defineOptions({
    name: 'Header',
    inheritAttrs: true,
})
const router = useRouter()
const route = useRoute()
const activeRoutesStore = useActiveRouterStore()
const activePath = ref('')
const tabs = ref([])


watch(
    () => route.fullPath,
    path => {
        activePath.value = path
        if (!tabs.value.find(i => i.path === path)) {
            activeRoutesStore.addRoute({
                title: route.meta.title || '未命名',
                fullPath: route.fullPath,
                name: route.name,
            })
        }
    },
    {
        immediate: true,
    },
)
const removeTab = (routeName) => {
    /**
     * 清除tabs中的点击项的tab的同时清除keep-alive的缓存
     * 
     */
    const item = activeRoutesStore.activeRoutes.find(i => i.fullPath === routeName)
    activeRoutesStore.removeRoute(item)
}
const handleTabClick = tab => {
    //  console.log('点击tab',tab.props.name)
    router.push(tab.props.name)
    console.log(router, route)
}

const showContextMenu = () => {
    console.log('右键tab')
}
</script>

<style scoped lang="scss">
.main-header {
    background: #fff;

    .navbar {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        align-items: center;

        .user-info {
            display: flex;
            align-items: center;
        }

        .username {
            margin-left: 10px;
        }
    }

    /* 隐藏 el-tabs__content */
    ::v-deep .el-tabs {
        .el-tabs__content {
            display: none;
        }

        .el-tabs__header {
            margin-bottom: 2px;
            border-bottom: none;
            height: 32px;
        }

        .el-tabs__item {
            height: 32px;
        }

        .is-active {}
    }
}
</style>
